<template>
	<div id="EnrollOffice">
		<div class="title-bg">
			<img src="../assets/images/home/active_banner.png" alt="" />
		</div>
		<div class="price-box">
			<card>
				<div slot="content" class="card-price-flex">
					<div class="vux-1px-r">
						<span>{{details.item_count}}</span>
						<p>参赛藏品</p>
					</div>
					<div class="vux-1px-r">
						<span>{{details.ticket_count * multiple}}</span>
						<p>累计投票</p>
					</div>
					<div>
						<span>{{details.vote_vcount}}</span>
						<p>总访问量</p>
					</div>
				</div>
			</card>
		</div>
		<div class="count">
			<count-down :currentTime="Number(cur_time)" :startTime="Number(new Date(details.vote_starttime).getTime() / 1000)" :endTime="Number(new Date(details.vote_endtime).getTime() / 1000)" :tipText="'距开始'" :tipTextEnd="'距活动结束仅剩'" :endText="'已结束'" :dayTxt="'天'" :hourTxt="'时'" :minutesTxt="'分'" :secondsTxt="'秒'">
			</count-down>
		</div>
		<div class="collection-intro">
			<div class="vote-detail-title">
				<span>填写信息</span>
				<span class="title-bg"></span>
			</div>
			<ul class="submit">
				<li>
					<label>藏品名称:</label>
					<input type="text" v-model="collect_name" placeholder="请输入藏品名称" class="input" />
				</li>
				<li>
					<label>联系人:</label>
					<input type="text" v-model="collect_host" placeholder="请输入姓名" class="input" />
				</li>
				<li>
					<label>联系电话:</label>
					<input type="number" v-model="collert_mobile" placeholder="请输入手机号" class="input" />
				</li>
				<li>
					<label>上传照片4-8张:</label>
					<div class="img-list" id="imgList">
						<div id="photos"></div>
						<div class="last">
							<input id="file" type="file" class="fileprew" accept="image/*" multiple="multiple" />
						</div>
					</div>
				</li>
				<li>
					<label>藏品介绍:</label>
					<textarea v-model="collert_intro" name="" rows="20" cols="40" placeholder="请介绍藏品信息"></textarea>
				</li>
			</ul>
			<div class="check">
				<p>
					<span @click="enrollInfo">提交报名</span>
				</p>
			</div>
		</div>
		<bottom></bottom>
		<loading :show="show" text="上传中"></loading>
		<toast v-model="success" type="text" width="6rem">{{msg}}</toast>
	</div>
</template>

<script>
	import bottom from './ActiveFooter'
	import CountDown from 'vue2-countdown';
	import { Card, Toast, Loading } from 'vux'
	import $ from 'jquery'
	import 'lrz/dist/lrz.all.bundle'
	import axios from 'axios'
	export default {
		data() {
			return {
				success: false,
				show: false,
				flag: true,
				msg: '',
				vote_id: '1',
				multiple: '10',
				collect_name: '',
				collect_host: '',
				collert_mobile: '',
				collert_intro: '',
				master_img: '',
				details: '',
				cur_time: ''
			}
		},
		components: {
			CountDown,
			Card,
			Toast,
			bottom,
			Loading
		},
		mounted() {
			this.getVoteDetail();
			//			this.getUserInfo();
			let _this = this;
			document.querySelector('#file').addEventListener('change', function() {
				let _that = this;
				let view = $('#photos');
				//限制图片上传张数
				let imgcount = 7;
				for(let i = 0; i < _that.files.length; i++) {
					_this.show = true;
					lrz(_that.files[i]).then(function(rst) {
						//是否可继续添加
						let status = true;
						if(view.find('img').length == imgcount) {
							status = false;
							_this.success = !_this.success;
							_this.msg = '最多上传8张图片';
							$('.last').hide();
						}
						if(status) {
							let str = '<div class="item">' +
								'<img src ="' + rst.base64 + '"/>' +
								'<a href="javascript:;" class="del">删除</a>' +
								'<input type="hidden" id="images" name="images[]" value="' + rst.base64 + '"/>'; +
							'</div>';
							view.append(str);
							if(i == _that.files.length - 1) {
								// 处理成功会执行
								_this.show = false;
							}
							//点击删除
							$(".del").on("click", function() {
								$(this).parent().remove();
								$(".last").show();
							});
						}
						//ajax上传
					}).catch(function(err) {
						// 处理失败会执行
					})
				}
			});
		},
		methods: {
			getVoteDetail: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/vote/details.json?vote_id=' + this.vote_id
				}).then((result) => {
					if(result.data.code == 1) {
						this.cur_time = result.data.cur_time;
						this.details = result.data.data;
					}
				}).catch((err) => {

				})
			},
			getUserInfo: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/member/info.json',
					data: ''
				}).then((result) => {
					if(result.data.code == 1) {
						this.collect_host = result.data.data.member_truename;
						this.collert_mobile = result.data.data.member_mobile
					}
				}).catch((err) => {

				})
			},
			enrollInfo: function() {
				this.show = true;
				var val = new Array;
				$('#imgList .item input').each(function(index, item) {
					val[index] = $(this).val();
				})
				var remark = this.collert_intro.replace(/\n|\r\n/g, "<br>");
				let params = {
					vote_id: this.vote_id,
					item_title: this.collect_name,
					item_intro: remark,
					item_imgs: val,
					member_truename: this.collect_host,
					member_mobile: this.collert_mobile
				}
				if(this.collect_name == '') {
					this.success = !this.success;
					this.msg = '请完善藏品名称'
				} else if(this.collert_intro == '') {
					this.success = !this.success;
					this.msg = '请完善藏品介绍'
				} else if(this.collect_host == '') {
					this.success = !this.success;
					this.msg = '请完善联系人姓名'
				} else if(this.collert_mobile == '') {
					this.success = !this.success;
					this.msg = '请完善联系电话'
				} else if(val == '') {
					this.success = !this.success;
					this.msg = '请上传图片'
				} else {
					this.$http({
						method: 'POST',
						url: '/los/api/vote/item_reg.json',
						data: params
					}).then((result) => {
						if(result.data.code == 1) {
							this.show = false;
							this.success = !this.success;
							this.msg = result.data.msg;
							setTimeout(() => {
								location.href = '#/VoteDetail/item_id/' + result.data.data.vote_item.item_id
							}, 100)
						} else {
							this.show = false;
							this.success = !this.success;
							this.msg = result.data.msg;
						}
					}).catch((err) => {

					})
				}

			},
		}
	}
</script>

<style scoped>
	.title-bg {
		width: 100%;
		height: 4.42rem;
	}
	
	.title-bg img {
		width: 100%;
		height: 100%;
	}
	
	.price-box {
		position: relative;
		height: 1.78rem;
		background: #fff;
		padding-top: 0.42rem;
	}
	
	.price-box .weui-panel {
		background: none;
	}
	
	.price-box .weui-panel:before,
	.price-box .weui-panel:after {
		border: none;
	}
	
	.price-box .card-price-flex {
		display: flex;
	}
	
	.price-box .card-price-flex>div {
		flex: 1;
		text-align: center;
		font-size: 0.32rem;
		color: #aaa;
	}
	
	.price-box .card-price-flex span {
		color: #d35f5d;
		font-size: 0.48rem;
	}
	
	.price-box .card-price-flex p {
		padding-top: 0.13rem;
		color: #aaa;
		font-size: 0.32rem;
	}
	
	.price-box .card-price-flex .vux-1px-r:after {
		top: 0.21rem;
		height: 0.48rem;
		border-color: #e6e6e6!important;
	}
	
	.count {
		background: #eeeef2;
		height: 1.76rem;
		width: 100%;
	}
	
	.count .count-down {
		margin: 0.49rem 1.05rem;
		width: 7.89rem;
		height: 0.88rem;
		line-height: 0.88rem;
		background: #fff;
		text-align: center;
		border-radius: 0.1rem;
	}
	
	.collection-intro {
		background: #fff;
		padding: 0.4rem;
	}
	
	.vote-detail-title {
		position: relative;
		height: 0.8rem;
		text-align: center;
		font-size: 0.42666rem;
	}
	
	.vote-detail-title span {
		font-size: 0.42rem;
		color: #333;
	}
	
	.vote-detail-title .title-bg {
		position: absolute;
		left: 50%;
		bottom: 0;
		margin-left: -1.83333rem;
		width: 3.66666rem;
		height: 0.54666rem;
		background: url(../assets/images/home/vote_detail_title_bg.png) center bottom no-repeat;
		background-size: 100% 100%;
	}
	
	.collection-intro .submit li {
		margin-top: 0.5rem;
		overflow: hidden;
	}
	
	.collection-intro .submit li label {
		font-size: 0.37rem;
		color: #333;
		width: 1.61rem;
		height: 0.82rem;
		line-height: 0.82rem;
		margin-right: 0.21rem;
		display: inline-block;
		float: left;
	}
	
	.collection-intro .submit li .input {
		float: left;
		width: 7.36rem;
		height: 0.82rem;
		line-height: 0.82rem;
		padding-left: 0.48rem;
		background: #f3f3f3;
		border-radius: 0.41rem;
		font-size: 0.37rem;
		color: #777;
	}
	
	.collection-intro .submit li textarea {
		float: left;
		background: #f3f3f3;
		width: 7.3rem;
		height: 3.54rem;
		padding: 0.24rem 0.48rem;
		border-radius: 0.08rem;
		font-size: 0.37rem;
		color: #777;
		resize: none;
	}
	
	.collection-intro .check {
		padding-top: 0.61rem;
		padding-bottom: 1.8rem;
	}
	
	.collection-intro .check p {
		width: 100%;
		height: 1.17rem;
		padding-bottom: 0.74rem;
	}
	
	.collection-intro .check p span {
		float: left;
		width: 9.2rem;
		margin: 0 auto;
		height: 1.17rem;
		line-height: 1.17rem;
		text-align: center;
		font-size: 0.4rem;
		color: #fff;
		background: #c76d6b;
		border-radius: 0.08rem;
	}
</style>
<style>
	#EnrollOffice .img-list {
		overflow: hidden;
	}
	
	#EnrollOffice .img-list .item {
		position: relative;
		float: left;
		width: 1.8rem;
		height: 1.8rem;
		margin-right: 0.06rem;
		margin-bottom: 0.06rem;
	}
	
	#EnrollOffice .img-list .item .add {
		display: none;
	}
	
	#EnrollOffice .img-list .item:first-child .add {
		display: block;
		width: 100%;
		height: 0.61rem;
		line-height: 0.61rem;
		position: absolute;
		color: #fff;
		font-size: 0.32rem;
		text-align: center;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
	}
	
	#EnrollOffice .img-list .item:nth-child(4n) {
		margin-right: 0;
	}
	
	#EnrollOffice .img-list .item img {
		width: 1.8rem;
		height: 1.8rem;
	}
	
	#EnrollOffice .img-list .item .del {
		position: absolute;
		right: 0.10666rem;
		top: 0.10666rem;
		width: 0.58666rem;
		height: 0.58666rem;
		font-size: 0;
		background: url(../assets/images/home/icon_del.png) center center no-repeat;
		background-size: 100%;
	}
	
	#EnrollOffice .img-list .last {
		text-align: center;
		font-size: 0.34666rem;
		color: #aaa;
		border: dashed 1px #e6e6e6;
		position: relative;
		float: left;
		width: 2.18rem;
		height: 2.18rem;
	}
	
	#EnrollOffice .img-list .last {
		text-align: center;
		width: 1.8rem;
		height: 1.8rem;
		border: dashed 1px #e6e6e6;
		position: relative;
	}
	
	#EnrollOffice .img-list .last:before {
		content: '';
		position: absolute;
		top: 0.8rem;
		left: 0.56rem;
		width: 0.6rem;
		height: 0.05rem;
		background-color: #aaa;
	}
	
	#EnrollOffice .img-list .last:after {
		content: '';
		position: absolute;
		top: 0.52rem;
		width: 0.05rem;
		height: 0.6rem;
		background-color: #aaa;
	}
	
	#EnrollOffice .img-list .last .fileprew {
		position: absolute;
		top: 0;
		left: 0;
		width: 1.8rem;
		height: 1.8rem;
		font-size: 1.33333rem;
		opacity: 0;
		/* 实现的关键点 */
		filter: alpha(opacity=0);
		/* 兼容IE */
	}
</style>